<template>
  <!-- 导航栏 -->
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      z-index="1000"
      @click-left="back"
    />

  <van-checkbox-group v-model="checked" @change="ToggleGroup">

    <div v-for="(item, key) in list" :key="key" class="cart">
      <van-checkbox :name="item.id"></van-checkbox>

      <!-- 滑动单元格 -->
      <van-swipe-cell>
        <!-- @click="ProductInfo" -->
        <!-- 商品卡片 -->
        <van-card
          title="商品名称"
          :tag="item.product.flag_text"
          :thumb="item.product.thumbs_text"
          @click-thumb="ProductInfo(item.product.id)"
        >
          <template #title>
            <div class="title">{{ item.product.name }}</div>
          </template>

          <!-- 卡片的插槽部分 -->
          <template #desc v-if="item.attrs">
            <van-tag v-for="(attr, index) in item.attrs" :key="index" class="tag" type="primary">{{attr.value}}</van-tag>
          </template>
          <template #desc v-else>
            <van-tag class="tag" type="primary">无规格数据</van-tag>
          </template>

          <template #tags>
            <div class="price">单价：￥{{item.price}}</div>
          </template>

          <template #price>
            <div class="price">合计：￥{{item.total}}</div>
          </template>

          <!-- 卡片的商品数量 步进器 -->
          <template #num>
            <van-stepper theme="round" v-model="item.nums" @change="CartUpdate(item)"/>
          </template>
        </van-card>

        <!-- 滑动单元格插槽 右侧滑动 -->
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="CartDel(item)"
          />
        </template>

      </van-swipe-cell>
    </div>



  </van-checkbox-group>

  <!-- 提交动作栏 -->
  <van-submit-bar :price="total" @submit="submit" button-text="提交订单">
    <van-checkbox v-model="CheckedAll" @change="toggleAll">全选</van-checkbox>
  </van-submit-bar>
</template>

<script setup>

  const {proxy} = getCurrentInstance()

  let business = proxy.$business
  let list = ref([])
  let checked = ref([])
  let CheckedAll = ref(false)

  onMounted(() =>{
    CartInfo()
  })

  // 查询购物车列表
  const CartInfo = async () => {
    var result = await proxy.$POST({
      url: '/cart/index',
      params: {busid:business.value.id}
    })

    if(!result) return false

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }
    result.data.map(item => item.attrs = JSON.parse(item.attrs))
    list.value = result.data
  }

  // 更新购物车数量
  const CartUpdate = async (item) => {
    var result = await proxy.$POST({
      url: 'cart/edit',
      params: {cartid: item.id, nums: item.nums}
    })

    if(!result) return false

    if(result.code == 0)
    {
      proxy.$fail(result.msg)
      return false
    }

    CartInfo()
  }

  //删除该购物车
  const CartDel = async (item) => {
    proxy.$confirm({
      message: '是否确认删除'
    }).then(async () => {

      var result = await proxy.$POST({
        url: 'cart/del',
        params: {cartid: item.id}
      })

      if(!result) return false

      if (result.code == 0) 
      {
        proxy.$fail(result.msg);
        return false;
      }

      CartInfo(); //重新请求购物车列表
    }).catch((err) => {
      console.log('取消删除')
    })
  }
  // 当选了所有商品时，全选亮
  const ToggleGroup = (names) => CheckedAll.value = (names.length == list.value.length) ? true : false
  // 全选
  const toggleAll = (value) => {
    if(value){
      checked.value = list.value.map(item => item.id) // 全选
    }else{
      checked.value = [] // 取消全选
    }
  }

  const total = computed(() => {
    var total = 0

    list.value.map((item) => {
      if(checked.value.includes(item.id)) total += parseFloat(item.total)
    })

    return parseFloat(total*100)
  })

  function ProductInfo(proid) {
    proxy.$router.push({path: '/product/info', query: {proid}})
  }
  // const pinfo = (proid) => {
  //   proxy.$router.push({path: '/product/info', query: {proid}})
  // }

  //返回上一页
  const back = () => proxy.$router.push('/')

  // const back = () => proxy.$router.go(-1)

  const submit = () =>{
    if(checked.value.length <= 0)
    {
      proxy.$fail('请选择下单商品')
      return false
    }

    proxy.$router.push({path: '/cart/confirm', query: {cartids: checked.value.join(',')}})
  }
</script>

<style scoped>
  @import url('/assets/css/cart.css');
</style>